<template>
  <div class="app-container home">

    <el-calendar  v-model="value" v-if="isShow"  >
      <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
      <template
        slot="dateCell"
        slot-scope="{date, data}"
      >
        <div style="height:76px;overflow-y: auto;overflow-y: hidden; ">
          <el-link href="#" >
            <span style="font: normal 500 16px/2 楷体" >{{getCell(data,date)}}</span>
          </el-link><br>

          <el-link href="#"  >
            <span class="gradient-text">{{getVal(data,1)}}</span>
          </el-link><br>
          <el-link href="#" >
            <span class="gradient-text2">{{getVal(data,2)}}</span>
          </el-link><br>

        </div>

      </template>
    </el-calendar>

  </div>
</template>

<script>

import { listDayCurriculum } from "@/api/index";

export default {
  name: "Index",
  data() {
    return {
      isShow:false,
      value:new Date(),
      dataList:[],
    };
  },
  created() {
    //this.getList();
  },
  methods: {
    getCell(data,date){
      if(data.isSelected){
        console.log(data)
      }
      return data.day.split('-')[2];
    },
    getVal(data,index){
      //data.day
      let ok=0;
      for (let i = 0; i <this.dataList.length ; i++) {
        if(data.day==this.dataList[i]['myDay']){
          ok++;
          if(index==ok){
            return this.dataList[i]['name']+'('+this.dataList[i]['sl']+')';
          }
        }
      }
      return '';
    },
    getList(){
      listDayCurriculum({}).then(response => {
        this.dataList = response.data;
        this.isShow=true;
      });
    }
  },
};
</script>
<style>
.is-selected {
  color: #1989FA;
}
.gradient-text {
  background-image: linear-gradient(to left, #ff0000, #00afff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gradient-text2 {
  background-image: linear-gradient(to left, #1ab394,#1c84c6,#20B2AA );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

</style>
